import React, { useMemo, FC } from 'react';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { useSelector } from 'umi';
import { Layout, IObject } from '@cscec/udp-ui';
import routeConfig from '../../../route';

function getRouteInfo(pathname: string, routes: string | any[]): IObject | null {
  if (!(routes && routes.length)) {
    return null;
  }
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].path === pathname) {
      return routes[i];
    }
    const route = getRouteInfo(pathname, routes[i].children);
    if (route) {
      return route;
    }
  }
  return null;
}

interface IHeader {
  toggle: () => void;
  collapsed: boolean;
  pathname: string;
}

const TopHeader: FC<IHeader> = ({ toggle, collapsed, pathname }) => {
  const state = useSelector<any, any>((m: { model_global: any; }) => m.model_global);
  const route = useMemo(() => getRouteInfo(pathname, routeConfig), [pathname]);
  return (
    <Layout direction="row" style={{ alignItems: 'center', height: '100%' }}>
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        style: { fontSize: '18px', marginRight: 20 },
        onClick: toggle,
      })}
      <Layout.Flex style={{
        overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', marginRight: 20,
      }}
      >
        <span>
          当前页面信息：
          {route?.name}
        </span>
      </Layout.Flex>
      <div>
        <div style={{ textAlign: 'right', flex: 1 }}>
          <span children={state.userId} />
        </div>
      </div>
    </Layout>
  );
};

export default TopHeader;
